<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
    <meta content="" name="description"/>
    <meta content="" name="author"/>
    <meta name="MobileOptimized" content="320"/>
    <link href="../../resources/plugins/bootstrap/css/bootstrap.min.css"
          th:src="@{/resources/plugins/bootstrap/css/bootstrap.min.css}" rel="stylesheet" type="text/css"/>
    <link href="../../resources/plugins/bootstrap/css/bootstrap.css"
          th:src="@{/resources/plugins/bootstrap/css/bootstrap.css}" rel="stylesheet" type="text/css"/>
    <link href="../../resources/css/style.css" th:src="@{/resources/css/style.css}" rel="stylesheet" type="text/css"/>
    <link href="../../resources/css/style-metronic.css" th:src="@{/resources/css/style-metronic.css}" rel="stylesheet"
          type="text/css"/>
    <link href="../../resources/plugins/font-awesome/css/font-awesome.min.css"
          th:src="@{/resources/plugins/font-awesome/css/font-awesome.min.css}" rel="stylesheet" type="text/css"/>
    <script src="../../resources/plugins/jquery-1.10.2.min.js" th:src="@{/resources/plugins/jquery-1.10.2.min.js}"
            type="text/javascript"></script>
    <script src="../../resources/plugins/dataTables.bootstrap.js" th:src="@{/resources/plugins/dataTables.bootstrap.js}"
            type="text/javascript"></script>
    <script src="../../resources/plugins/jquery.dataTables.js" th:src="@{/resources/plugins/jquery.dataTables.js}"
            type="text/javascript"></script>
    <script src="../../resources/plugins/bootstrap/js/bootstrap.js"
            th:src="@{/resources/plugins/bootstrap/js/bootstrap.js}" type="text/javascript"></script>
    <script src="../../resources/plugins/bootstrap/js/bootstrap.min.js"
            th:src="@{/resources/plugins/bootstrap/js/bootstrap.min.js}" type="text/javascript"></script>


    <style>
        .row {
            margin: auto
        }

        th{

            width: 500px;
        }
        td{

            width: 500px;
        }
    </style>


</head>
<body>
<h3 class="page-title" style="margin-top:22px">
    入库
    <small>管理</small>
</h3>
<hr/>


<!--table-->
<div id="showStorage" class="row" >
    <div class="col-md-12" style="margin-top:20px;">
        <div class="panel panel-info">
            <div class="panel-heading">入库记录信息</div>
            <table id="table" class="table table-striped table-bordered table-hover datatable">
                <thead id="item" style="display: block;margin-left: 8px">
                    <th id="goodsISBN">商品IBSN编号</th>
                    <th id="goodsName">商品名称</th>
                    <th id="goodsNumber">库存数量</th>
                    <th id="storageDate">入库日期</th>
                    <th id="importUser">理货员</th>
                </thead>
                <tbody id="tbody" style="display: block;height: 450px;overflow-y: scroll">

                </tbody>
            </table>
        </div>
    </div>
</div>


<!--分页导航-->
<div id="bottomTool" class="row-fluid">


    <!--分页-->
    <div class="span6" style="float:left;margin-left:120px;margin-top:-8px">
        <div class="dataTables_paginate paging_bootstrap pagination">
            <ul id="previousNext">
                <li id="prevli"  onClick="previous()" class="prev" style="float:left" ><a id="previousPage"
                                                                                        href="#">上一页</a>
                </li>
                <div id="page" style="float:left;width:60px">
                    <select id="pageNum" onChange="search()" aria-controls="DataTables_Table_0" size="1"
                            name="DataTables_Table_0_length" style="margin-top:-2px">
                        <option selected="selected" value="1">1</option>
                    </select>
                </div>
                <li id="nextli" class="next" onClick="next()" style="float:left"><a id="nextPage" href="#">下一页</a></li>
            </ul>
        </div>
    </div>


    <!--选择每页多少行-->
    <div class="span6" style="float:left;margin-left:200px">
        <div class="dataTables_length" id="DataTables_Table_0_length">
            <label>每页
                <select id="pageSize" onChange="research()" aria-controls="DataTables_Table_0" size="1"
                        name="DataTables_Table_0_length">
                    <option selected="selected" value="10">10</option>
                    <option value="25">25</option>
                    <option value="50">50</option>
                </select>
                条记录
            </label>
        </div>
    </div>
    <div class="span6" style="float:left;margin-left:40px">
        <div id="DataTables_Table_0_info" class="dataTables_info" style="font-size:15px">显示第1至10项记录，共57项</div>
    </div>


</div>


</body>

<script type="text/javascript">
    // <![CDATA[
    window.onload = function () {
        $("#pageSize").val(10);
        $("#pageNum").val(1);
        search();
    };

    function next() {
        var id = $("#pageNum option:selected").val();
        var nextPage = parseInt(id) + 1;
        var list = document.getElementById("pageNum").options;
        var nextOption = list[nextPage - 1];
        nextOption.selected = true;
        search();
    }

    function previous() {
        var id = $("#pageNum option:selected").val();
        var previousPage = parseInt(id) - 1;
        var list = document.getElementById("pageNum").options;
        var previousOption = list[previousPage - 1];
        previousOption.selected = true;
        search();
    }

    function research() {
        var list = document.getElementById("pageNum").options;
        var nextOption = list[0];
        nextOption.selected = true;
        search();
    }

    function search() {
        //var searchString = $("#searchString").val();
        var pageSize = $("#pageSize").val();
        var pageNum = $("#pageNum").val();

        $.ajax({
            type: "POST",
            async: true,
            url: "/manage/findStorageAllPage",
            data: {
                "pageSize": pageSize,
                "curPage": pageNum,
            },
            dataType: "text",
            success: function (data) {
                var pageEntity = eval("(" + data + ")");

                var obj = pageEntity.productList;  //结果集
                //将除模板行的thead删除，即删除之前的数据重新加载
                var code = "";
                for (var i = 0; i < obj.length; i++) {
//                    var row = $("item").clone;     //获取模板行，复制一行
//
//                    row.find("#goodsISBN").text(obj[i].productId);
//                    row.find("#goodsName").text(obj[i].productName);
//                    row.find("#goodsNumber").text(obj[i].amount);
//                    row.find("#storageDate").text(obj[i].updateTime);
//                    row.find("#importUser").text(obj[i].user.name);
//                    row.appendTo("#table");     //将新行添加到表中
                    code += "<tr>" +
                            "<td>" + obj[i].barcode + "</td>" +
                            "<td>" + obj[i].productName + "</td>" +
                            "<td>" + obj[i].amount + "</td>" +
                            "<td>" + obj[i].updateTime + "</td>" +
                            "<td>" + obj[i].user.name + "</td>" +
                            "</tr>";
                }
                $("#tbody").empty().append(code);

                var currentPage = pageEntity.page.currentPage;
                var totlePage = pageEntity.page.totlePage;
                var totleNumber = pageEntity.page.totleNumber;


                $("#DataTables_Table_0_info").html("共" + totlePage + "页/共"+totleNumber+"项");

                //显示所有的页码数
                var pageSelect = document.getElementById("page");
                var pageOption = "";
                var flag;

                //删除select下所有的Option,清楚所有页码
                document.getElementById("pageNum").options.length = 0;
                for (var i = 0; i < totlePage; i++) {
                    flag = (i + 1).toString();
                    var option;
                    //如果等于当前页码数
                    if (flag == pageNum) {
                        option = new Option(flag, flag, false, true);
                    } else {
                        option = new Option(flag, flag, false, false);
                    }
                    document.getElementById("pageNum").options.add(option);
                }

                //判断页数，下一页都为灰色
                if (currentPage == totlePage) {
                    $("#nextPage").css("color", "#aaa");
                    $("#nextli").css("pointer-events", "none");
                } else {
                    $("#nextPage").css("color", "#00f");
                    $("#nextli").css("pointer-events", "auto");
                }
                if (currentPage == 1) {     //首页则给上一页灰色
                    $("#previousPage").css("color", "#aaa");
                    $("#prevli").css("pointer-events", "none");
                } else {       //尾页则上一页蓝，下一页灰
                    $("#previousPage").css("color", "#00f");
                    $("#prevli").css("pointer-events", "auto");
                }
            }
        });
    }
    // ]]>
</script>
</html>
